<?php get_header(); ?>
<section class="jzp-carousel-1">
	<div id="jzp-carousel-1" class="carousel slide carousel-fade" data-ride="carousel">
		<ol class="carousel-indicators">
			<button class="carousel-indicators-to active" type="button" data-bs-target="#jzp-carousel-1" data-slide-to="0" class="" aria-label="Slide 1"></button>
			<button class="carousel-indicators-to" type="button" data-bs-target="#jzp-carousel-1" data-slide-to="1" aria-label="Slide 2" aria-current="true"></button>
			<button class="carousel-indicators-to" type="button" data-bs-target="#jzp-carousel-1" data-slide-to="2" aria-label="Slide 3"></button>
		</ol>

		<div class="carousel-inner">
			<div class="carousel-item active">
				<img src="<?php echo get_theme_file_uri() . '/assets/images/slider-1.jpg'; ?>" class="d-block w-100 slider-image">
				<div class="carousel-caption d-flex align-items-center">
					<div class="container">
						<div class="row d-flex align-items-center">
							<div class="col-md-6 mx-auto text-center">
								<h2 class="fw-bold text-white animate__animated animate__fadeInDown"><?php echo get_bloginfo('name'); ?></h2>
								<p class="text-white py-lg-3 animate__animated animate__fadeInUp">Specializing R&D of Post-printing Equipment (Children's Books, Playing Cards,Smart Cards etc.)</p>
								<p class="animate__animated animate__fadeInUp"><a class="btn btn-customer" href="<?php echo home_url('contact-us'); ?>" role="button">Contact Us</a></p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="carousel-item">
				<img src="<?php echo get_theme_file_uri() . '/assets/images/slider-2.jpg'; ?>" class="d-block w-100 slider-image">
				<div class="carousel-caption d-flex align-items-center">
					<div class="container">
						<div class="row d-flex align-items-center">
							<div class="col-md-6 mx-auto text-center">
								<h2 class="fw-bold text-white animate__animated animate__fadeInDown"><?php echo get_bloginfo('name'); ?></h2>
								<p class="text-white py-lg-3 animate__animated animate__fadeInUp">Specializing R&D of Post-printing Equipment (Children's Books, Playing Cards,Smart Cards etc.)</p>
								<p class="animate__animated animate__fadeInUp"><a class="btn btn-customer" href="<?php echo home_url('contact-us'); ?>" role="button">Contact Us</a></p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="carousel-item">
				<img src="<?php echo get_theme_file_uri() . '/assets/images/slider-3.jpg'; ?>" class="d-block w-100 slider-image">
				<div class="carousel-caption d-flex align-items-center">
					<div class="container">
						<div class="row d-flex align-items-center">
							<div class="col-md-6 mx-auto text-center">
								<h2 class="fw-bold text-white animate__animated animate__fadeInDown"><?php echo get_bloginfo('name'); ?></h2>
								<p class="text-white py-lg-3 animate__animated animate__fadeInUp">Specializing R&D of Post-printing Equipment (Children's Books, Playing Cards,Smart Cards etc.)</p>
								<p class="animate__animated animate__fadeInUp"><a class="btn btn-customer" href="<?php echo home_url('contact-us'); ?>" role="button">Contact Us</a></p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- <button class="carousel-control-prev" type="button" data-bs-target="#jzp-carousel-1" data-bs-slide="prev">
			<i class="fa fa-angle-left" aria-hidden="true"></i>
			<span class="visually-hidden">Previous</span>
		</button>
		<button class="carousel-control-next" type="button" data-bs-target="#jzp-carousel-1" data-bs-slide="next">
			<i class="fa fa-angle-right" aria-hidden="true"></i>
			<span class="visually-hidden">Next</span>
		</button> -->
	</div>
</section>

<section class="index-feature py-5">
	<div class="container">
		<div class="row pt-5">
			<?php
			$args = array(
				'type' => 'post',
				'orderby' => 'name',
				'order' => 'ASC',
				'hide_empty' => false,
			);
			$categories = get_categories($args);
			foreach ($categories as $category) :
			?>
				<div class="col-md-4">
					<div class="if-item shadow-sm effect-imghover mb-4">
						<a href="<?php echo get_category_link($category->term_id); ?>">
							<?php // 需要开启Categories Images插件 
							?>
							<img src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url($category->term_id); ?>" class="img-fluid  category-thumbnail" alt="<?php $category->name; ?>">
						</a>
						<div class="if-item-text p-3">
							<h5 class="text-center"><a href="<?php echo get_category_link($category->term_id); ?>"><?php $category->name; ?></a></h5>
							<p class=""></p>
							<div class="border-top pt-3 d-flex justify-content-between">
								<span><i class="fa fa-folder-open-o text-customer"></i>
									<a href="<?php echo get_category_link($category->term_id); ?>" rel="category">Service Items</a>
								</span>
								<span><i class="fa fa-angle-double-right text-customer"></i> <a href="<?php echo get_category_link($category->term_id); ?>">More content</a></span>
							</div>
						</div>
					</div>
				</div>
			<?php endforeach; ?>
		</div>
	</div>
</section>
<section class="index-about-two py-5">
	<div class="container  ">
		<div class="row align-items-center">
			<div class="col-md-5 mb-3">
				<div class="img-box">
					<img src="<?php echo get_theme_file_uri() ?>/assets/images/index-about.jpg" class="img-fluid">
				</div>
			</div>
			<div class="col-md-6 offset-md-1 text-start">
				<div class="section-title-two">
					<h3 class="title fw-bold">About Us</h3>
					<p class="text-customer">About Us</p>
				</div>
				<p class="text-muted">Established in 2008, Wentong has over 20 years of experience in developing and manufacturing of smart card machines and post-press equipment. We have been committed to constantly growing and improving our products and service to meet all our customer’s requirements for production of children’s books, board books, paper cards and plastic cards</p>
				<p class=""><a href="<?php echo home_url('contact-us'); ?>" class="btn btn-customer">Contact Us</a></p>
			</div>
		</div>
	</div>
</section>
<section class="index-service bg-light-customer py-5">
	<div class="container">

		<div class="row">
			<div class="text-center">
				<div class="section-title-two">
					<h3 class="title fw-bold">Popular products</h3>
					<p class="text-customer">Popular products</p>
				</div>

			</div>
		</div>
		<div class="row pt-5">
			<?php $args = array(
				'post_type' => 'product',
				'posts_per_page' => 3,
				'orderby' => 'rand',
			);
			$loop = new WP_Query($args);
			?>
			<?php while ($loop->have_posts()) : $loop->the_post(); ?>
				<div class="col-md-4">
					<div class="is-item bg-white shadow-sm effect-imghover mb-4">
						<a href="<?php the_permalink(); ?>">
							<?php the_post_thumbnail('shop_catelog'); // 目录图片 
							?>
						</a>
						<div class="is-item-text p-3">
							<h5 class="text-center"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
							<p class=""><?php if(!empty(get_the_excerpt())) { the_excerpt(); } ?></p>
							<p class="text-center"><a href="<?php the_permalink(); ?>" class="btn btn-outline-customer px-3">Read More</a></p>
						</div>
					</div>
				</div>
			<?php endwhile; ?>
			<?php wp_reset_postdata(); ?>
		</div>

	</div>
</section>
<section class="index-testimonial py-5">
	<div class="container">
		<div class="row">
			<div class="text-center">
				<div class="section-title-two">
					<h3 class="title fw-bold">Customer feedback</h3>
					<p class="text-customer">Customer feedback</p>
				</div>

			</div>
		</div>
		<div class="row pt-5">
			<div class="owl-carousel owl-carousel-testimonial owl-loaded owl-drag">
				<!-- item -->
				<!-- item -->
				<!-- item -->
				<div class="owl-stage-outer">
					<div class="owl-stage" style="transform: translate3d(-5304px, 0px, 0px); transition: 0.25s; width: 9282px;">
						<?php $query = new WP_Query(array('post_type' => 'customer_feedback')); ?>
						<?php while ($query->have_posts()) : $query->the_post(); ?>
							<div class="owl-item cloned" style="width: 1296px; margin-right: 30px;">
								<div class="col-md-8 mx-auto">
									<div class="item align-items-center wow fadeInUp">
										<?php the_post_thumbnail('full', array('class' => 'rounded-circle img-fluid border p-2 mx-auto mb-4')); ?>
										<div class="text-center">
											<p><?php echo substr(get_the_excerpt(), 0, 155); ?></p>
											<figcaption class="blockquote-footer mb-0 text-dark fw-bold pt-3"><?php the_title(); ?></figcaption>
										</div>
									</div>
								</div>
							</div>
						<?php endwhile; ?>
						<?php wp_reset_postdata(); ?>
					</div>
				</div>
				<div class="owl-nav disabled"><button type="button" role="presentation" class="owl-prev"><span aria-label="Previous">‹</span></button><button type="button" role="presentation" class="owl-next"><span aria-label="Next">›</span></button></div>
				<div class="owl-dots"><button role="button" class="owl-dot"><span></span></button><button role="button" class="owl-dot"><span></span></button><button role="button" class="owl-dot active"><span></span></button></div>
			</div>
		</div>
	</div>
</section>
<section class="index-news bg-light-customer py-5">
	<div class="container">
		<div class="row">
			<div class="text-center">
				<div class="section-title-two">
					<h3 class="title fw-bold">news</h3>
					<p class="text-customer">Our News</p>
				</div>

			</div>
		</div>
		<div class="row pt-5 justify-content-between">
			<?php $args = array(
				'post_type' => 'post',
				'posts_per_page' => 3,
				'orderby' => 'date',
				'order' => 'DESC',
				'post_status' => 'publish',
				'ignore_sticky_posts' => true
			);
			$query = new WP_Query($args);
			?>
			<?php while ($query->have_posts()) : $query->the_post(); ?>
				<div class="col-md-4">
					<div class="in-item bg-white shadow-sm effect-imghover mb-4">
						<a href="<?php the_permalink(); ?>">
							<?php the_post_thumbnail('full', array('class' => 'img-fluid')); ?>
						</a>
						<div class="p-3">
							<div class="in-item-text">
								<h5 class="text-center"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
								<p class=""><?php echo substr(get_the_excerpt(), 0, 155); ?></p>
							</div>
							<p class="text-center"><a href="<?php the_permalink(); ?>" class="btn btn-light-customer px-3">Read More</a></p>
						</div>
					</div>
				</div>
			<?php endwhile; ?>
			<?php wp_reset_postdata(); ?>
		</div>
	</div>
</section>

<?php get_footer(); ?>